<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="正在使用" name="first">
        <el-row>
          <el-form :model="usingQueryParams" ref="usingQueryForm" size="small" :inline="true">
            <el-form-item label="房间号" prop="roomNo">
              <el-input v-model="usingQueryParams.roomNo" placeholder="请输入房间号" clearable />
            </el-form-item>
            <el-form-item label="床号" prop="bedNo">
              <el-input v-model="usingQueryParams.bedNo" placeholder="请输入床号" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" size="small" @click="pageQueryUsingList" plain>搜索</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
          </el-col>
        </el-row>
        <el-row v-loading="usingLoading">
          <el-table :data="usingTableData" align="center">
            <el-table-column type="index" label="序号" width="120" />
            <el-table-column prop="roomNo" label="房间号" />
            <el-table-column prop="bedNo" label="床号" />
            <el-table-column prop="bedStatus" label="床状态" />
            <el-table-column prop="remarks" label="备注" />
            <el-table-column prop="createBy" label="创建人" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="updateBy" label="更新人" />
            <el-table-column prop="updateTime" label="更新时间" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" link type="primary" icon="Edit" @click="toEditUsing(scope.row.id)">修改</el-button>
                <el-button size="small" link type="primary" icon="Exchange" @click="bedTransfer(scope.row.id)">床位调换</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination layout="sizes,prev,pager,next,jumper,->,total," :total="usingQueryParams.total"
                         v-model:page-size="usingQueryParams.size" v-model:current-page="usingQueryParams.current"
                         @current-change="pageQueryUsingList" @size-change="pageQueryUsingList"
                         :page-sizes="[2, 3, 5, 10, 20, 30, 40, 50, 100]" />
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="历史记录" name="second">
        <el-row>
          <el-form :model="historyQueryParams" ref="historyQueryForm" size="small" :inline="true">
            <el-form-item label="房间号" prop="roomNo">
              <el-input v-model="historyQueryParams.roomNo" placeholder="请输入房间号" clearable />
            </el-form-item>
            <el-form-item label="床号" prop="bedNo">
              <el-input v-model="historyQueryParams.bedNo" placeholder="请输入床号" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" size="small" @click="pageQueryHistoryList" plain>搜索</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
          </el-col>
        </el-row>
        <el-row v-loading="historyLoading">
          <el-table :data="historyTableData" align="center">
            <el-table-column type="index" label="序号" width="120" />
            <el-table-column prop="roomNo" label="房间号" />
            <el-table-column prop="bedNo" label="床号" />
            <el-table-column prop="bedStatus" label="床状态" />
            <el-table-column prop="remarks" label="备注" />
            <el-table-column prop="createBy" label="创建人" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="updateBy" label="更新人" />
            <el-table-column prop="updateTime" label="更新时间" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" link type="primary" icon="Edit" @click="toEditHistory(scope.row.id)">查看详情</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination layout="sizes,prev,pager,next,jumper,->,total," :total="historyQueryParams.total"
                         v-model:page-size="historyQueryParams.size" v-model:current-page="historyQueryParams.current"
                         @current-change="pageQueryHistoryList" @size-change="pageQueryHistoryList"
                         :page-sizes="[2, 3, 5, 10, 20, 30, 40, 50, 100]" />
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-model="showEditUsing" title="正在使用信息编辑" style="width: 800px;">
      <Edit v-if="showEditUsing" :closeDialog="closeEditUsingDialog" :editId="editUsingId" />
    </el-dialog>
    <el-dialog v-model="showEditHistory" title="使用历史信息查看" style="width: 800px;">
      <HistoryEdit v-if="showEditHistory" :closeDialog="closeEditHistoryDialog" :editId="editHistoryId" />
    </el-dialog>
  </template>
  
  <script setup name="Bed">
  import { onMounted, ref } from 'vue'
  import Edit from './edit.vue'
  import HistoryEdit from './historyedit.vue'
  import { queryBedList, getById } from '@/api/bed/index'
  import { ElMessageBox, ElNotification } from 'element-plus'
  
  // 正在使用相关
  const usingTableData = ref([])
  const usingLoading = ref(false)
  const usingQueryParams = ref({
    roomNo: '',
    bedNo: '',
    size: 10,
    current: 1,
    total: 0,
    remarks: 1 // 表示正在使用
  })
  
  // 使用历史相关
  const historyTableData = ref([])
  const historyLoading = ref(false)
  const historyQueryParams = ref({
    roomNo: '',
    bedNo: '',
    size: 10,
    current: 1,
    total: 0,
    remarks: 2 // 表示使用历史
  })
  
  // 正在使用列表查询
  async function pageQueryUsingList() {
    usingLoading.value = true
    try {
      const page = await queryBedList(usingQueryParams.value)
      usingLoading.value = false
      usingTableData.value = page.records
      usingQueryParams.value.total = page.total
    } catch (e) {
      ElNotification({
        title: '错误',
        type: 'error',
        message: '查询正在使用床位信息失败，请稍后重试'
      })
    }
  }
  
  // 使用历史列表查询
  async function pageQueryHistoryList() {
    historyLoading.value = true
    try {
      const page = await queryBedList(historyQueryParams.value)
      historyLoading.value = false
      historyTableData.value = page.records
      historyQueryParams.value.total = page.total
    } catch (e) {
      ElNotification({
        title: '错误',
        type: 'error',
        message: '查询使用历史床位信息失败，请稍后重试'
      })
    }
  }
  
  // 关闭正在使用编辑弹窗并重新查询
  const closeEditUsingDialog = (query) => {
    showEditUsing.value = false
    if (query) {
      pageQueryUsingList()
    }
  }
  
  // 关闭使用历史查看弹窗并重新查询
  const closeEditHistoryDialog = (query) => {
    showEditHistory.value = false
    if (query) {
      pageQueryHistoryList()
    }
  }
  
  // 跳转到正在使用编辑页面
  const toEditUsing = (id) => {
    editUsingId.value = id
    showEditUsing.value = true
  }
  
  // 跳转到使用历史查看页面
  const toEditHistory = (id) => {
    editHistoryId.value = id
    showEditHistory.value = true
  }
  
  // 床位调换方法（可根据实际业务实现逻辑）
  const bedTransfer = (id) => {
    ElMessageBox.confirm('确认进行床位调换?', 'Warning', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' })
     .then(() => {
        // 调用调换接口，成功后提示并重新查询
        ElNotification({
          title: '消息',
          type: 'success',
          message: '床位调换成功'
        })
        pageQueryUsingList()
      }).catch(() => {
        // 取消操作提示
        ElNotification({
          title: '消息',
          type: 'info',
          message: '已取消床位调换'
        })
      })
  }
  
  const showEditUsing = ref(false)
  const editUsingId = ref(0)
  const showEditHistory = ref(false)
  const editHistoryId = ref(0)
  
  onMounted(() => {
    pageQueryUsingList()
    pageQueryHistoryList()
  })
  </script>
  
  <style scoped></style>